<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Event Details</title>
    </h:head>
    <h:body>
        <ui:composition template="./templateuser.xhtml">
            <ui:define name="center">
                <h:form id="formid">
                    
                    <p:toolbar>
                        <p:toolbarGroup align="right">
                            <p:commandButton value="Back" action="calendar?faces-redirect=true" />
                        </p:toolbarGroup>
                    </p:toolbar>
                    
                    <p:panel header="Event Details">
                        <h:panelGrid columns="2">
                            <h:panelGrid columns="2" id="eventGrid">
                                <h:outputLabel for="name">Name:</h:outputLabel>
                                <p:outputLabel id="name" value="#{eventDetailsBean.event.name}"/>

                                <h:outputLabel for="description">Description:</h:outputLabel>
                                <p:outputLabel id="description" value="#{eventDetailsBean.event.description}" />

                                <h:outputLabel for="date" value="Date:" />
                                <p:outputLabel id="date" value="#{eventDetailsBean.event.date}" >
                                    <f:convertDateTime pattern="dd/MM/yyyy" timeZone="GMT+1"/>
                                </p:outputLabel>

                                <h:outputLabel for="from" value="From:" />
                                <p:outputLabel id="from" value="#{eventDetailsBean.event.startTime}" >
                                    <f:convertDateTime pattern="hh:mm" timeZone="GMT+1"/>
                                </p:outputLabel>

                                <h:outputLabel for="to" value="To:" />
                                <p:outputLabel id="to" value="#{eventDetailsBean.event.endTime}" >
                                    <f:convertDateTime pattern="hh:mm" timeZone="GMT+1"/>
                                </p:outputLabel>

                                <h:outputLabel for="address" value="Address:" />
                                <p:outputLabel id="address" value="#{eventDetailsBean.event.place.address}" >
                                </p:outputLabel>

                                <h:outputLabel for="city" value="City:" />
                                <p:outputLabel id="city" value="#{eventDetailsBean.event.place.city.name}" >
                                </p:outputLabel>

                                <h:outputLabel for="nation" value="Nation:" />
                                <p:outputLabel id="nation" value="#{eventDetailsBean.event.place.city.nation.name}" >
                                </p:outputLabel>

                                <h:outputLabel for="type" value="Type:" />
                                <p:outputLabel id="type" value="#{eventDetailsBean.type}" >
                                </p:outputLabel>
                            </h:panelGrid>
                            <p:outputPanel>
                                <p:graphicImage value="#{eventDetailsBean.weatherForecast}" height="150" width="150" rendered="#{eventDetailsBean.type.equals('Outdoor')}"/>
                            </p:outputPanel>
                        </h:panelGrid>
                    </p:panel>
                    
                    <p:accordionPanel multiple="true">
                        <p:tab title="Invitation List" >
                            <p:dataList id="invitedlist" value="#{eventDetailsBean.event.invitations}" var="invitation" type="unordered" itemType="none" paginator="true" rows="10" styleClass="paginated">
                                <f:facet name="header">
                                    Invited People
                                </f:facet>
                                <h:outputText value="#{invitation.user.username}" style="display:inline-block"/>
                            </p:dataList>
                        </p:tab>
                        <p:tab title="List of Participants">
                            <p:dataList id="participantlist" value="#{eventDetailsBean.event.participants}" var="user" type="unordered" itemType="none" paginator="true" rows="10" styleClass="paginated">
                                <f:facet name="header">
                                    Participants
                                </f:facet>
                                <h:outputText value="#{user.username}" style="display:inline-block"/>
                            </p:dataList>
                        </p:tab>
                    </p:accordionPanel>

                </h:form>
            </ui:define>
        </ui:composition>
    </h:body>
</html>
